<template>
  <div class="my-table1001">
    <!-- vxe-工具栏 -->
    <template v-if="isVxeToolbar">
      <vxe-toolbar>
        <!-- 按钮列表 -->
        <template v-slot:buttons>

          <template v-if="isVxeDropdown">
            <el-dropdown size="mini" @command="dropdownMenuEvent" style="margin-right:15px">
              <el-button size="mini">
                <!-- 操作button handle -->
                {{ handleS }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <!-- 删除选中button delSelected -->
                <el-dropdown-item command="remove">{{ $t('base.delSelected') }}</el-dropdown-item>
                <!-- <el-dropdown-item command="export">导出数据</el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <!-- 新增button -->
          <el-button size="mini" @click="handleCreate" type="diyfirst">{{ $t('base.add') }}</el-button>

          <!-- 表格工具组-按钮列表扩展插槽 -->
          <slot name="vxeToolsButtonsExtend">

          </slot>
          <!-- <el-button @click="insertEvent">新增</el-button> -->
          <!-- <el-button @click="saveEvent">保存</el-button> -->
          <!-- <el-button @click="vaildEvent">校验</el-button> -->
        </template>
        <!-- 右侧工具列表 -->
        <template v-slot:tools>
          <!-- 表格工具组扩展插槽 -->
          <slot name="vxeToolbarExtend">

          </slot>
        </template>
      </vxe-toolbar>
    </template>
    <vxe-table
      border="outer"
      align="center"
      stripe
      class="mytable-scrollbar"
      resizable
      show-overflow
      highlight-hover-row
      ref="xTable"
      size="mini"
      height="500"
      :export-config="{}"
      :loading="loading"
      :data="tableData"
      :sort-config="{remote:true,trigger:'cell'}"
      @sort-change="sortChange"
    >
      <!-- 复选框 -->
      <template v-if="isVxeCheckbox">
        <vxe-table-column type="checkbox" width="60" fixed="left"></vxe-table-column>
      </template>
      <!-- 操作 -->
      <template v-if="isVxeHandleS">
        <vxe-table-column
          :title="handleS"
          :width="handleColsWidth"
          fixed="left"
          show-overflow
        >
          <template v-slot="{ row }">
            <!-- 根据传参是否显示删除  -->
            <el-button type="text" size="mini" @click="handleUpdate(row)">
              <!-- 修改 -->
              {{ $t('base.modify') }}
            </el-button>
            <!-- 根据传参是否显示删除  -->
            <!-- 删除 -->
            <!-- <el-button v-if="true" size="mini" type="text" @click="removeEvent(row)">

            {{ $t('base.del') }}
            </el-button> -->
            &nbsp;
            <el-popconfirm
              :confirm-button-text="$t('base.affirm')"
              :cancel-button-text="$t('base.cancel')"
              icon="el-icon-info"
              icon-color="red"
              :title="$t('message.msg2')"
              @confirm="removeEvent(row)"
            >
              <el-button slot="reference" size="mini" type="text">{{ $t('base.del') }}</el-button>
            </el-popconfirm>


            <!-- 曲线图插槽 -->
            <slot name="viewChart" v-bind:row="row">
              <!-- <el-button v-if="true" size="mini" type="text" @click="viewChart(row)">
                  曲线图
              </el-button> -->
            </slot>

            <!-- 操作列扩展插槽 -->
            <slot name="handleExtend" v-bind:row="row">
              <!-- <el-button v-if="true" size="mini" type="text" @click="viewChart(row)">
                  曲线图
              </el-button> -->
            </slot>


            <!-- <vxe-button type="text" icon="fa fa-edit" @click="editEvent(row)"></vxe-button>
            <vxe-button type="text" icon="fa fa-trash-o" @click="removeEvent(row)"></vxe-button> -->
          </template>
          <!--
            插槽使用
            <slot  name="header" v-bind:items="items"  v-bind:items2="items2"></slot>
            <template v-slot:header="{items,items2}">
                <p v-text="items"></p>
                <p v-text="items2"></p>
            </template>
           -->

        </vxe-table-column>
      </template>


      <!-- 序列 传参定义是否显示 -->
      <template v-if="isVxeColSeq">
        <vxe-table-column type="seq" width="60" fixed="left"></vxe-table-column>
      </template>
      <!-- id -->
      <!-- <vxe-table-column field="id" title="ID" fixed="left"></vxe-table-column> -->
      <!-- title 标题 -->
      <!-- <vxe-table-column
      field="title"
      title="标题"
      min-width="180"
      ></vxe-table-column> -->

      <!-- 动态字段内容编辑 -->
      <vxe-table-column v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>


      <!-- 以下是 vxe 使用兼容elementui 生成 行内编辑模式 -->
      <!-- <vxe-table-column field="name" title="ElInput" min-width="140" fixed="left" :edit-render="{name: 'ElInput'}"></vxe-table-column>
      <vxe-table-column field="role" title="ElAutocomplete" width="160" :edit-render="{name: 'ElAutocomplete', props: {fetchSuggestions: roleFetchSuggestions}}"></vxe-table-column>
      <vxe-table-column field="age" title="ElInputNumber" width="160" :edit-render="{name: 'ElInputNumber', props: {max: 35, min: 18}}"></vxe-table-column>
      <vxe-table-column field="sex" title="ElSelect" width="140" :edit-render="{name: 'ElSelect', options: sexList}"></vxe-table-column>
      <vxe-table-column field="sexList" title="ElSelect multiple" width="180" :edit-render="{name: 'ElSelect', options: sexList, props: {multiple: true}}"></vxe-table-column>
      <vxe-table-column field="state" title="ElSelect remote" width="140" :edit-render="{name: 'ElSelect', options: stateOptions, props: {remote: true, filterable: true, loading: stateloading, remoteMethod: remoteStateMethod}}"></vxe-table-column>
      <vxe-table-column field="region" title="ElCascader" width="200" :edit-render="{name: 'ElCascader', props: {options: regionList}}"></vxe-table-column>
      <vxe-table-column field="date" title="ElDatePicker" width="200" :edit-render="{name: 'ElDatePicker', props: {type: 'date', format: 'yyyy/MM/dd'}}"></vxe-table-column>
      <vxe-table-column field="date1" title="ElDatePicker" width="220" :edit-render="{name: 'ElDatePicker', props: {type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss'}}"></vxe-table-column>
      <vxe-table-column field="date5" title="ElTimeSelect" width="200" :edit-render="{name: 'ElTimeSelect', props: {pickerOptions: {start: '08:30', step: '00:15', end: '18:30'}}}"></vxe-table-column>
      <vxe-table-column field="flag" title="ElSwitch" width="100" :cell-render="{name: 'ElSwitch'}"></vxe-table-column>
      <vxe-table-column field="slider" title="ElSlider" width="200" :cell-render="{name: 'ElSlider'}"></vxe-table-column>
      <vxe-table-column field="rate" title="ElRate" width="200" fixed="right" :cell-render="{name: 'ElRate'}"></vxe-table-column> -->
    </vxe-table>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'
import XEUtils from 'xe-utils'

export default {
  name: 'exBaseTable',
  components: {
    //PageHeaderLayout,
  },
  props: {
    /* 加载数据状态 */
    loading: {
      type: Boolean,
      default: false
    },
    /* 表格列定义 */
    tableColumn: {
      type: Array,
      default() {
        return []
      }
    },
    /* 表格数据 */
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    /* 是否需要工具按钮组 */
    isVxeToolbar: {
      type: Boolean,
      default: true
    },
    /* 是否需要复选框 */
    isVxeCheckbox: {
      type: Boolean,
      default: true
    },
    /* 是否需要操作 */
    isVxeHandleS: {
      type: Boolean,
      default: true
    },
    /* 是否需要序列 */
    isVxeColSeq: {
      type: Boolean,
      default: true
    },
    isVxeDropdown: {
      type: Boolean,
      default: false
    },
    /* 操作列宽度 */
    handleColsWidth: {
      type: Number,
      default: 200
    }

  },
  // 定义属性
  data() {
    return {
      // loading: false,  //表格数据加载动效
      // tableData: [],  //表格数据
      // tableColumn: [], //动态增加的字段
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    handleS() {
      return this.$t('base.handleS');
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    /* 表格工具栏相关方法 */
    // 表格-操作下拉按钮
    
    // 新增弹窗按钮
    handleCreate() {
      this.$emit('handleCreateEmit', 'create')
      // 重置表单内容
      // this.resetFormSubmitData()
      // this.dialogStatus = 'create'
      // this.dialogFormVisible = true
      // this.$nextTick(() => {
      //     this.$refs['dataForm'].clearValidate()
      // })
    },
    /* 表格相关方法 */
    // 表格行内删除
    removeEvent(row) {
      this.$emit('handleRmoveColEmit', row)

      // this.$XModal.confirm('您确定要删除该数据?').then(type => {
      //     if (type === 'confirm') {

      //         // this.$refs.xTable.remove(row)
      //     }
      // })
    },
    // 修改弹窗按钮
    handleUpdate(row) {
      this.$emit('handleUpdateEmit', row, 'update')
      // this.temp = Object.assign({}, row) // copy obj
      // this.temp.timestamp = new Date(this.temp.timestamp)
      // this.dialogStatus = 'update'
      // this.dialogFormVisible = true
      // this.$nextTick(() => {
      //     this.$refs['dataForm'].clearValidate()
      // })
    },
    sortChange({column, property, order, sortBy, sortList, $event}) {
      // property：字段名 order：排除规则
      console.log("排序排序排序排序排序排序", property);
      this.$emit('customSortMethodEmit', property, order)
    },

    buildSettingHtml(row) {
      let str = ``;
      let str2 = ``;
      XEUtils.arrayEach(row.term_rate, (item, key) => {
        str += ` <th>${item.term}</th> `
        str2 += ` <td>${item.rate}</td> `
      })
      // console.log("sdfdsf3322222term_values",term_values);
      return `<table border="0" style="margin:0 auto;" cellspacing="0" cellpadding="0" class="term-tab1001">
                <tr>
                  ${str}
                </tr>
                <tr>
                  ${str2}
                </tr>
              </table>`
    }
  },  //methods-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
  background-color: #FFFFFF;
}

/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
  background-color: #bfbfbf;
  border-radius: 5px;
  border: 1px solid #F1F1F1;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
  background-color: #A8A8A8;
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
  background-color: #787878;
}

/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
  background-color: #FFFFFF;
}

.my-table1001 {
  ::v-deep {
    .vxe-table.size--mini .vxe-header--column.col--ellipsis, .vxe-table.size--mini .vxe-body--column.col--ellipsis, .vxe-table.size--mini .vxe-footer--column.col--ellipsis, .vxe-table.vxe-editable.size--mini .vxe-body--column {
      height: 65px;
    }

    .vxe-table.size--mini .vxe-header--column.col--ellipsis > .vxe-cell, .vxe-table.size--mini .vxe-body--column.col--ellipsis > .vxe-cell, .vxe-table.size--mini .vxe-footer--column.col--ellipsis > .vxe-cell {
      max-height: 65px;
    }

    .term-tab1001 {
      th, td {
        padding: 3px 8px;
      }
    }

  }

}

</style>